<template>
  <div class="content">
    <div class="title">
      <b></b>
      <p>超限统计</p>
    </div>
    <div id="over" class="chart1"></div>
  </div>
</template>

<script>
import * as serviceApi from "../common/service.config";
import Axios from "axios";
export default {
  name: "Overrun",
  mounted() {
    let fun = async () => {
      await Axios({
        url: serviceApi.KB_API,
        method: "post",
        async: true,
        headers: {
          "content-type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
        data:
          'appMsg={"parameter":"{}","serviceCode":"' +
          serviceApi.CONSTANT.LIST_MONITOR_AND_SENSOR +
          '","timestamp":"","uuid":""}',
      }).then((res) => {
        let listArr = res.data.parameter.list;
        if (listArr.length == 1) {
          (this.bdArr = 0),
            (this.qxArr = 0),
            (this.ytArr = 0),
            (this.bdArrs = 0),
            (this.qxArrs = 0),
            (this.ytArrs = 0),
            (this.bdArrTwo = 0),
            (this.qxArrTwo = 0),
            (this.ytArrTwo = 0),
            (this.bdArrThree = 0),
            (this.qxArrThree = 0),
            (this.ytArrThree = 0);
          let overList = listArr[0].sensorList;
          switch (listArr[0].id) {
            case 1:
              for (let i in overList) {
                if (
                  overList[i].moduleEnum == "00" &&
                  overList[i].dataWarnStatus == "01"
                ) {
                  this.bdArr++;
                } else if (
                  overList[i].moduleEnum == "01" &&
                  overList[i].dataWarnStatus == "01"
                ) {
                  this.qxArr++;
                } else if (
                  overList[i].moduleEnum == "02" &&
                  overList[i].dataWarnStatus == "01"
                ) {
                  this.ytArr++;
                }
              }
              break;
            case 2:
              for (let i in overList) {
                if (
                  overList[i].moduleEnum == "00" &&
                  overList[i].dataWarnStatus == "01"
                ) {
                  this.bdArrs++;
                } else if (
                  overList[i].moduleEnum == "01" &&
                  overList[i].dataWarnStatus == "01"
                ) {
                  this.qxArrs++;
                } else if (
                  overList[i].moduleEnum == "02" &&
                  overList[i].dataWarnStatus == "01"
                ) {
                  this.ytArrs++;
                }
              }
              break;
            case 3:
              for (let i in overList) {
                if (
                  overList[i].moduleEnum == "00" &&
                  overList[i].dataWarnStatus == "01"
                ) {
                  this.bdArrTwo++;
                } else if (
                  overList[i].moduleEnum == "01" &&
                  overList[i].dataWarnStatus == "01"
                ) {
                  this.qxArrTwo++;
                } else if (
                  overList[i].moduleEnum == "02" &&
                  overList[i].dataWarnStatus == "01"
                ) {
                  this.ytArrTwo++;
                }
              }
              break;
            case 4:
              for (let i in overList) {
                if (
                  overList[i].moduleEnum == "00" &&
                  overList[i].dataWarnStatus == "01"
                ) {
                  this.bdArrThree++;
                } else if (
                  overList[i].moduleEnum == "01" &&
                  overList[i].dataWarnStatus == "01"
                ) {
                  this.qxArrThree++;
                } else if (
                  overList[i].moduleEnum == "02" &&
                  overList[i].dataWarnStatus == "01"
                ) {
                  this.ytArrThree++;
                }
              }
          }
        } else {
          let overList = res.data.parameter.list[0].sensorList;
          (this.bdArr = 0), (this.qxArr = 0), (this.ytArr = 0);
          for (let i in overList) {
            if (
              overList[i].moduleEnum == "00" &&
              overList[i].dataWarnStatus == "01"
            ) {
              this.bdArr++;
            } else if (
              overList[i].moduleEnum == "01" &&
              overList[i].dataWarnStatus == "01"
            ) {
              this.qxArr++;
            } else if (
              overList[i].moduleEnum == "02" &&
              overList[i].dataWarnStatus == "01"
            ) {
              this.ytArr++;
            }
          }
          let overLists = res.data.parameter.list[1].sensorList;
          (this.bdArrs = 0), (this.qxArrs = 0), (this.ytArrs = 0);
          for (let i in overLists) {
            if (
              overLists[i].moduleEnum == "00" &&
              overLists[i].dataWarnStatus == "01"
            ) {
              this.bdArrs++;
            } else if (
              overLists[i].moduleEnum == "01" &&
              overLists[i].dataWarnStatus == "01"
            ) {
              this.qxArrs++;
            } else if (
              overLists[i].moduleEnum == "02" &&
              overLists[i].dataWarnStatus == "01"
            ) {
              this.ytArrs++;
            }
          }
          let overListTwo = res.data.parameter.list[2].sensorList;
          (this.bdArrTwo = 0), (this.qxArrTwo = 0), (this.ytArrTwo = 0);
          for (let i in overListTwo) {
            if (
              overListTwo[i].moduleEnum == "00" &&
              overListTwo[i].dataWarnStatus == "01"
            ) {
              this.bdArrTwo++;
            } else if (
              overListTwo[i].moduleEnum == "01" &&
              overListTwo[i].dataWarnStatus == "01"
            ) {
              this.qxArrTwo++;
            } else if (
              overListTwo[i].moduleEnum == "02" &&
              overListTwo[i].dataWarnStatus == "01"
            ) {
              this.ytArrTwo++;
            }
          }
          let overListThree = res.data.parameter.list[3].sensorList;
          (this.bdArrThree = 0), (this.qxArrThree = 0), (this.ytArrThree = 0);
          for (let i in overListThree) {
            if (
              overListThree[i].moduleEnum == "00" &&
              overListThree[i].dataWarnStatus == "01"
            ) {
              this.bdArrThree++;
            } else if (
              overListThree[i].moduleEnum == "01" &&
              overListThree[i].dataWarnStatus == "01"
            ) {
              this.qxArrThree++;
            } else if (
              overListThree[i].moduleEnum == "02" &&
              overListThree[i].dataWarnStatus == "01"
            ) {
              this.ytArrThree++;
            }
          }
        }
        //渲染数据
        let myChart = this.$echarts.init(document.getElementById("over"));
        let option = {
          color: ["skyblue", "yellow", "#ffa11b"],
          legend: {
            textStyle: {
              color: "white",
              fontSize: 14,
            },
            data: ["北斗", "岩土", "气象"],
          },
          dataset: {
            source: [
              ["西宁南山", this.bdArr, this.qxArr, this.ytArr],
              ["西宁大通(已终止)", this.bdArrs, this.qxArrs, this.ytArrs],
              ["西宁南川公路", this.bdArrTwo, this.qxArrTwo, this.ytArrTwo],
              [
                "王家庄-褚家营监测项目",
                this.bdArrThree,
                this.qxArrThree,
                this.ytArrThree,
              ],
            ],
          },
          xAxis: [
            {
              type: "category",
              axisLine: {
                lineStyle: {
                  type: "solid",
                  color: "#fff",
                },
              },
              axisLabel: {
                show: true,
                interval: 0,
                rotate: "25",
                textStyle: {
                  color: "rgba(255,255,255,0.8)",
                  fontSize: 11,
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              max: 35,
              interval: 5,
              name: "(个)",
              splitLine: {
                //网格线
                lineStyle: {
                  type: "dashed",
                  color: "rgba(255,255,255,0.2)", //设置网格线类型 dotted：虚线   solid:实线
                },
              },
              axisLine: {
                lineStyle: {
                  type: "solid",
                  color: "rgba(255,255,255,0.5)",
                },
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "rgba(255,255,255,0.8)",
                  fontSize: 14,
                },
              },
              axisTick: {
                show: false,
              },
              nameTextStyle: {
                color: "#fff",
              },
            },
          ],
          series: [
            {
              name: "北斗",
              type: "bar",
              barWidth: 10,
              itemStyle: {
                emphasis: {
                  barBorderRadius: 30,
                },
                normal: {
                  barBorderRadius: [10, 10, 0, 0],
                },
              },
            },
            {
              name: "岩土",
              type: "bar",
              barWidth: 10,
              itemStyle: {
                emphasis: {
                  barBorderRadius: 30,
                },
                normal: {
                  barBorderRadius: [10, 10, 0, 0],
                },
              },
            },
            {
              name: "气象",
              type: "bar",
              barWidth: 10,
              itemStyle: {
                emphasis: {
                  barBorderRadius: 30,
                },
                normal: {
                  barBorderRadius: [10, 10, 0, 0],
                },
              },
            },
          ],
        };
        myChart.clear();
        myChart.setOption(option);
      });
    };
    fun();
    const timer = setInterval(async () => {
      await fun();
    }, 1000 * 120);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });
  },
};
</script>